<template>
    <div id="EChartsTableSpace" ref="EChartsTableSpace" style="height: 250px"></div>
</template>>

<script>
import { fetchData } from '@/api/index.js';
import bus from 'common/bus.js';

export default {
    data() {
        return {
            postData: {
                opera: 'dbTableSpace',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {
                    "monid": "02F2CD5CE4544B74943C90D3102D928B",
                },
            },
            EChartsTableSpace: {},
            CPUx: 0,
            CPUy: 0,
            EChartsOption: {
                animationDuration: 100,
                animationEasingUpdate: 'quinticInOut',
                title: {
                    text: '表空间使用率%',
                    textStyle: {
                        color: 'rgb(200, 200, 200)',
                        fontWeight: 'bold',
                        fontSize: 15,
                        lineHeight: 40,
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: ''
                    }
                },
                grid: {
                    top: '20%',
                    left: '3%',
                    right: '4%',
                    // bottom: '10%',
                    height: '77%',
                    // width: '90%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    useData: [],
                    data: [],
                    axisTick: {
                        interval: 0
                    },
                    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}}
                },
                yAxis: {
                    axisLine: {color:'rgb(29, 140, 248)',lineStyle:{color:'rgb(29, 140, 248)'}},
                    type: 'value',
                    max: 100,
                    min: 0,
                    interval: 25,
                    splitLine: { 
                        lineStyle: {
                            color: 'rgb(29, 140, 248)',
                            opacity: 0.1
                        }
                    }
                },
                series: [{
                    name: '表空间使用率%',
                    data: [],
                    type: 'bar',
                    color: 'rgb(0, 121, 200)',
                    barWidth: '50%',
                }]
            },
            timerName: 'EChartsTableSpace',
            timerEventName: 'timerEChartsTableSpace',
            timerInterval: 1000 * 60
        }
    },
    created() {
        this.getData();
        bus.$emit('timerNewTodo', {
            name: this.timerName,
            eventName: this.timerEventName,
            interval: this.timerInterval,
            intervalNow: 0
        });

        bus.$on(this.timerEventName, msg => {
            if (msg.isGetData) {
                this.getData();
            }
        });
    },
    mounted() {
        this.EChartsTableSpace = this.$echarts.init(this.$refs.EChartsTableSpace);
        this.initTableSpaceLine();
    },
    computed: {
        postDataFn() {
            return {
                postData : JSON.stringify(this.postData)
            }
        }
    },
    methods: {
        colorMethod(memoryNow) {
            if (memoryNow <= 50) {
                return '#67c23a';
            } else if (memoryNow <= 75) {
                return '#e6a23c';
            } else {
                return '#f56c6c';
            }
        },
        getData(){
            fetchData(
                this.postDataFn
            ).then((res) => {
                let _arr = res.data.slice(0, 5);
                _arr.forEach(item => {
                    this.EChartsOption.xAxis.data.push(item.TABLESPACE_NAME);
                    this.EChartsOption.xAxis.useData.push(item.USED_PER * 100);
                });

                this.updateTableSpaceLine();
            });
        },
        initTableSpaceLine(){
            this.EChartsTableSpace.setOption(this.EChartsOption);
        },
        updateTableSpaceLine() {
            this.EChartsTableSpace.setOption({
                xAxis: {
                    data: this.EChartsOption.xAxis.data,
                },
                series: {
                    data: this.EChartsOption.xAxis.useData
                }
            })
        }
    },
    beforeDestroy() {
        bus.$emit('timerNewTodo', {
            name: this.timerName
        });
    },
    watch:{
        
    }
}
</script>

<style scoped>

</style>